<template>
  <div class="chart" ref="peoplechart"></div>
</template>

<script>
import * as echarts from 'echarts'
import {getVeteranAgeSta} from '@/api/api'
export default {
  data() {
    return {
      infoData: {},
      xArr: [],
      yArr: [],
      man: '',
      women: '',
      color: ['#2C4CC2', '#00F6FF'],
    }
  },
  mounted() {
    getVeteranAgeSta().then((res)=>{
      if(res.success){
        this.xArr = res.result.map(item=>{
          return item.value
        })
        this.yArr = res.result.map(item=>{
          return item.label
        })
        this.initChart()
      }
    })
    
  },
  methods: {
    initChart() {
      let myChart = echarts.init(this.$refs.peoplechart)
      let xArr =this.xArr
      let yArr =this.yArr
      let option = {
        grid: {
          height: '80%',
          width: '72%',
          top: '10%',
          left: '13%',
        },
        xAxis: {
          type: 'value',
          show: false,
          min: 0,
          max: 40000,
        },

        yAxis: {
          type: 'category',
          data:yArr,
          // data: ['18岁以下', '18-30岁', '30-45岁', '45-60岁', '60岁以上'],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 10,
            align: 'right',
            color: '#5E617B',
          },
        },
        series: [
          {
            data: xArr,
            type: 'bar',
            showBackground: false,
            backgroundStyle: {
              color: '#ccc',
              borderRadius: 10,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#699FFF' },
                { offset: 1, color: '#2FBAF7' },
              ]),
              borderRadius: 10,
            },
            barCategoryGap: '50%',
            barWidth: '40%',
            label: {
              show: true, //开启显示
              position: 'right', //在上方显示
              formatter: '{c}',
              textStyle: {
                //数值样式
                color: '#5E617B',
                fontSize: 10,
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.chart {
  height: 180px;
}
</style>